<template>
  <div class="container-detail">
    <el-drawer
        :size="'50%'"
        :before-close="handleClose"
        v-model="props.showUnitdetail"
    >
      <template #header="{ close, titleId, titleClass }">
        <h3 style="font-weight: 600">订单详情</h3>
      </template>
      <div class="middle-top">
        <div class="data-first">
          <div v-for="(item, index) in orderList"
               style="display: flex;align-items: center;width: 22%;justify-content: space-between;">
            <div class="status-up">
              <div class="status-label" :style="{ backgroundColor: item.dataValue.length > 3 ? '#4359f9' : '#aaaaaa' }">{{ item.dataKey }}</div>
              <div class="status-value">{{ item.dataValue }}</div>
            </div>
            <img v-if="index < orderList.length -1" style="width: 28px;height: 29px;"
                 src="@/assets/images/arrowRight.png" alt=""/>
          </div>
        </div>

        <div class="middle-top" style="display: flex;justify-content: space-between">
          <div class="middle-title">
            <img src="@/assets/images/title-icon.png" alt=""/>
            订单详情
          </div>
          <div v-if="keyPersonnel" class="middle-title-right">重点人员</div>
        </div>
        <div style="margin: 2% 0;">订单编号：{{ unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderCode : '-' }}</div>
        <div>
          <el-descriptions
              border
              style="margin: 20px 0"
              label-align="center"
              align="center"
              :column="2"
              class="limited-width"
          >
            <el-descriptions-item
                label="订单时间"
                label-class-name="desLabel"
                label-align="center"
                align="center"
                width="225"
            >
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderTime ? unitForm.sysOrderRespVo.orderTime : '-' : '-'"
                  placement="top"
              >
                <div class="des-content">
                  {{ unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderTime ? unitForm.sysOrderRespVo.orderTime : '-' : '-' }}
                </div>
              </el-tooltip>
            </el-descriptions-item>

            <el-descriptions-item
                label="购买物品"
                label-class-name="desLabel"
                class-name="desInfo"
                label-align="center"
                align="center"
                width="225"
            >
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderGoods ? unitForm.sysOrderRespVo.orderGoods : '-' : '-'"
                  placement="top"
              >
                <div class="des-content">
                  {{ unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderGoods ? unitForm.sysOrderRespVo.orderGoods : '-' : '-' }}
                </div>
              </el-tooltip>
            </el-descriptions-item>
            <el-descriptions-item
                label="买家信息"
                label-class-name="desLabel"
                label-align="center"
                align="center"
                width="225"
            >
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderBuyerName ? unitForm.sysOrderRespVo.orderBuyerName + '-' + unitForm.sysOrderRespVo.orderBuyerTel : '-' : '-'"
                  placement="top"
              >
                <div class="des-content">
                  {{ unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderBuyerName ? unitForm.sysOrderRespVo.orderBuyerName + '-' + unitForm.sysOrderRespVo.orderBuyerTel : '-' : '-' }}
                </div>
              </el-tooltip>
            </el-descriptions-item
            >
            <el-descriptions-item
                label="身份证"
                label-class-name="desLabel"
                label-align="center"
                align="center"
                width="225"
            >
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderBuyerIndo ? unitForm.sysOrderRespVo.orderBuyerIndo : '-' : '-'"
                  placement="top"
              >
                <div class="des-content">
                  {{ unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderBuyerIndo ? unitForm.sysOrderRespVo.orderBuyerIndo : '-' : '-' }}
                </div>
              </el-tooltip>
            </el-descriptions-item
            >
            <el-descriptions-item
                label="收货人信息"
                label-class-name="desLabel"
                label-align="center"
                align="center"
                width="225"
            >
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderHarverName ? unitForm.sysOrderRespVo.orderHarverName + '-' + unitForm.sysOrderRespVo.orderHarverTel : '-' : '-'"
                  placement="top"
              >
                <div class="des-content">
<!--                  {{ getOrderHarverNameAndTel(unitForm.sysOrderRespVo) }}-->
                  {{ unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderHarverName ? unitForm.sysOrderRespVo.orderHarverName + '-' + unitForm.sysOrderRespVo.orderHarverTel : '-'  : '-' }}
                </div>
              </el-tooltip>
            </el-descriptions-item
            >
            <el-descriptions-item
                label="收货地址"
                label-class-name="desLabel"
                label-align="center"
                align="center"
                width="225"
            >
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderHarverAddress ? unitForm.sysOrderRespVo.orderHarverAddress : '-' : '-'"
                  placement="top"
              >
                <div class="des-content">
                  {{ unitForm.sysOrderRespVo ? unitForm.sysOrderRespVo.orderHarverAddress ? unitForm.sysOrderRespVo.orderHarverAddress : '-' : '-' }}
                </div>
              </el-tooltip>
            </el-descriptions-item
            >
          </el-descriptions>
        </div>

        <div class="middle-top">
          <div class="middle-title">
            <img src="@/assets/images/title-icon.png" alt=""/>
            核查信息
          </div>
        </div>
        <div class="effective-data"
             v-if="unitForm.orderStrikeInfo !== null"
             :style="{
          backgroundColor: effectiveData ? '#f3fff1' : '#fbf1e7',
          color: effectiveData ? '#3f9453' : '#f26200'}">
          {{ effectiveData ? '有效数据' : '无效信息' }}
        </div>
        <div v-if="effectiveData">
          <div>
            <el-descriptions
                border
                style="margin: 20px 0"
                label-align="center"
                align="center"
                :column="2"
                class="limited-width"
            >
              <el-descriptions-item
                  label="核查时间"
                  label-class-name="desLabel"
                  class-name="desInfo"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.orderStrikeTime : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="核查人"
                  label-class-name="desLabel"
                  class-name="desInfo"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.orderStrikeUsername : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="核查单位"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.orderStrikeDeptname : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="宣传禁飞正常"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.xjFlag === 0 ? "未宣贯" : "已宣贯" : '-' }}
              </el-descriptions-item
              >
              <el-descriptions-item
                  label="常住地派出所"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.changPoliceName : '-' }}
              </el-descriptions-item
              >
              <el-descriptions-item
                  label="户籍地派出所"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.censusPoliceName ? unitForm.orderStrikeInfo.censusPoliceName : '-' : '-' }}
              </el-descriptions-item
              >
              <el-descriptions-item
                  label="核查备注"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
                  :span="2"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.remark ? unitForm.orderStrikeInfo.remark : '-' : '-' }}
              </el-descriptions-item
              >
            </el-descriptions>
          </div>
          <div class="middle-top">
            <div class="middle-title">
              <img src="@/assets/images/title-icon.png" alt=""/>
              被排查人员
            </div>
          </div>
          <div>
            <el-descriptions
                border
                style="margin: 20px 0"
                label-align="center"
                align="center"
                :column="2"
                class="limited-width"
            >
              <el-descriptions-item
                  label="姓名"
                  label-class-name="desLabel"
                  class-name="desInfo"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.validUserInfo ? unitForm.validUserInfo.orderStrikeUserName : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="现居住地"
                  label-class-name="desLabel"
                  class-name="desInfo"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.validUserInfo ? unitForm.validUserInfo.orderStrikeUserAddress : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="单位"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.validUserInfo ? unitForm.validUserInfo.orderStrikeUserWork : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="职业"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.validUserInfo ? unitForm.validUserInfo.orderStrikeUserOccupation : '-' }}
              </el-descriptions-item
              >
              <el-descriptions-item
                  label="身份证号码"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.validUserInfo ? unitForm.validUserInfo.orderStrikeUserIndo : '-' }}
              </el-descriptions-item
              >
              <el-descriptions-item
                  label="联系电话"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.validUserInfo ? unitForm.validUserInfo.orderStrikeUserTel : '-' }}
              </el-descriptions-item
              >
            </el-descriptions>
          </div>
          <div class="middle-top">
            <div class="middle-title">
              <img src="@/assets/images/title-icon.png" alt=""/>
              持有无人机
            </div>
          </div>
          <div class="holdDronesNumber">
            当前持有{{numberData}}架无人机
          </div>
          <div class="info">
            <!-- 表格数据 -->
            <el-table
                :data="unitForm.validDroneInfo"
                border
                height="200px"
                :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column
                  label="无人机品牌"
                  prop="droneBrand"
                  :show-overflow-tooltip="true"
                  width="140px"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  label="无人机型号"
                  prop="droneModel"
                  align="center"
                  :show-overflow-tooltip="true" width="140px"
              >
              </el-table-column>
              <el-table-column
                  label="无人机识别码"
                  prop="droneCode"
                  align="center"
                  :show-overflow-tooltip="true" width="120px"
              >
              </el-table-column>
              <el-table-column
                  label="本人/单位使用"
                  prop="droneUseGet"
                  :show-overflow-tooltip="true"
                  width="150px"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  label="用途"
                  prop="dronePurpose"
                  :show-overflow-tooltip="true"
                  width="180"
                  align="center"
              >
              </el-table-column>
              <el-table-column
                  label="备注"
                  prop="droneRemark"
                  :show-overflow-tooltip="true"
                  min-width="180"
                  align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div v-else>
          <div v-if="unitForm.orderStrikeInfo !== null">
            <el-descriptions
                border
                style="margin: 20px 0"
                label-align="center"
                align="center"
                :column="2"
                class="limited-width"
            >
              <el-descriptions-item
                  label="核查时间"
                  label-class-name="desLabel"
                  class-name="desInfo"
                  label-align="center"
                  align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.orderStrikeTime : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="核查人"
                  label-class-name="desLabel"
                  class-name="desInfo"
                  label-align="center"
                  width="225"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.orderStrikeUsername : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="核查单位"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
                  :span="2"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.orderStrikeDeptname : '-' }}
              </el-descriptions-item>
              <el-descriptions-item
                  label="核查备注"
                  label-class-name="desLabel"
                  label-align="center"
                  align="center"
                  width="225"
                  :span="2"
              >
                {{ unitForm.orderStrikeInfo ? unitForm.orderStrikeInfo.remark ? unitForm.orderStrikeInfo.remark : '-' : '-' }}
              </el-descriptions-item
              >
            </el-descriptions>
          </div>
          <div v-else style="display: flex;align-items: center;justify-content: center;height: 100px;color: grey;font-size: 14px;">
            暂无数据
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import {ref, onMounted, nextTick} from "vue";
import {
  getPepleInfoApi,
} from "@/api/erp/unit";
import {getKeynote, getOrderDetail, getOrderSpeed} from "@/api/orderVerification/order";

const emit = defineEmits(["refreshList"]);

const props = defineProps({
  showUnitdetail: {
    type: Boolean,
    default: false,
  },
});

const orderList = ref([])

// 表格加载效果
const loading = ref(false);

const unitForm = ref({});

// 是否为有效数据
const effectiveData = ref(true);
// 当前无人机持有数据
const numberData = ref(0);

//处理编辑
let validUserInfo = {}
const handleDetailInfo = async (id) => {
  const res = await getOrderDetail(id);
  unitForm.value = res.data;
  if (unitForm.value.sysOrderRespVo.orderBuyerIndo)
  console.log(unitForm.value)
  effectiveData.value = unitForm.value.isValid === 1 ? true : false;
  numberData.value = unitForm.value.validDroneInfo ? unitForm.value.validDroneInfo.length : 0;
  getOrderSpeedFun(id);
  isKeyPersonnel(unitForm.value.sysOrderRespVo.orderBuyerIndo)
};

let keyPersonnel = ref(false);
/*
* 是否是重点人员
* */
const isKeyPersonnel = (val) => {
  getKeynote({indo: val}).then((res) => {
    if (res.code === 200) {
      console.log(res)
      keyPersonnel.value = res.data;
    }
  })
}

/*
* 获取进度
* */
const getOrderSpeedFun = (id) => {
  getOrderSpeed(id).then((res) => {
    if (res.code === 200) {
      orderList.value = res.data.list;
    }
  })
}


const handleClose = () => {
  emit("update:showUnitdetail", false);
};

defineExpose({
  handleDetailInfo,
});
</script>

<style scoped lang="scss">
.container-detail {
  .info {
    padding: 20px 0;
  }

  .des-content {
    width: 80%;
    height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :deep(.el-drawer__header) {
    color: #000;
    border-bottom: 1px solid #d7d7d7;
  }

  :deep(.el-drawer__body) {
    padding-top: 0;
  }

  .container-detail-top {
    display: flex;

    .top-left {
      width: 70%;

      .top-left-content {
        margin-top: 15px;

        .address {
          display: flex;
          font-size: 14px;
          color: #666666;

          .item {
            display: flex;
            margin-right: 50px;
          }
        }

        .limited-width {
          :deep(.el-descriptions__label) {
            width: 130px !important;
          }
        }

        .selectstyle {
          margin: auto;

          :deep(.el-icon svg) {
            width: 0;
            height: 0;

            border-top-color: #6f6f6f;
            transform: translateY(4px);
          }

          :deep(.el-input__wrapper) {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
          }

          :deep(.el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }

          :deep(.el-select .el-input__wrapper.is-focus) {
            box-shadow: none !important;
          }

          :deep(.el-select .el-input.is-focus .el-input__wrapper) {
            box-shadow: none !important;
          }

          :deep(.el-input.is-disabled .el-input__inner) {
            -webkit-text-fill-color: #303133;
          }
        }
      }
    }

    .top-right {
      background: linear-gradient(-19deg, #00deff, #0096ff);
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      width: 30%;
      margin-left: 20px;
      padding: 10px 30px 20px 30px;

      .card-title {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        border-bottom: 1px solid #f6f6f6;

        .text {
          margin-left: 10px;
          font-size: 16px;
          color: #ffffff;
        }

        .operate {
          cursor: pointer;
          font-size: 12px;
          color: #ffffff;
        }

        .operate-explain {
          position: absolute;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          top: 8px;
          right: 68px;
          z-index: 10;
          background-color: #fff;
          padding: 10px 20px 20px 20px;
          box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.3);
          border-radius: 5px;

          .contenttext-close {
            color: #4d88fd;
            text-align: right;
            cursor: pointer;
          }

          .item {
            font-size: 12px;
            color: #7f7f7f;
          }
        }
      }

      .top-right-content {
        height: calc(100% - 31px);
        display: flex;
        margin-top: 10px;

        .content-left {
          width: 174px;
          background: url("@/assets/images/security.png") no-repeat;

          .index {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 50px;

            .num {
              font-size: 20px;
              color: #ffffff;
            }

            .text {
              font-size: 12px;
              color: #ffffff;
            }
          }
        }

        .content-right {
          width: 255px;
          padding: 25px 10px 10px;

          .right-message {
            padding: 0 20px;

            .right-title {
              font-size: 14px;
              color: #ffffff;
            }

            .right-content {
              font-size: 14px;
              color: #ffffff;
              text-indent: 2em;
              margin-top: 20px;
            }
          }

          .right-item {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;

            .item {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #ffffff;

              .item-content {
                margin-left: 10px;

                .content-num {
                  font-size: 20px;
                }
              }
            }
          }
        }
      }
    }
  }

  .container-detail-bottom {
    margin-top: 20px;

    .checktable {
      margin-top: 20px;
    }
  }

  .data-first {
    width: 93%;
    min-height: 150px;
    display: flex;
    margin: 0 0 0 6%;
    /* border: 1px red solid; */
    justify-content: space-between;

    .status-up {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 110px;

      .status-label {
        background-color: #4359f9;
        width: 130px;
        height: 60px;
        border-radius: 4px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }
    }

    .status-value {
      width: 132px;
      height: 40px;
      background-color: #f7f7f7;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .effective-data{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
  }

  .holdDronesNumber{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    background-color: #fff0dc;
    color: #f1574a;
  }

  .middle-title-right{
    background-color: #fef3e4;
    color: #f59e2a;
    font-size: 12px;
    width: 60px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>























